<template>
	<view class="container" style="height: 100vh;" :class="{ father: current == 2}" >
		<view class="header" :style="{ backgroundImage: 'url(' + IMG_URL + Background + ')' }">
			<view id="scrollView" class="dis-flex flex-y-center flex-x-between" :class="{ isFixed: isTop == 1 }">
				<image class="imgicon" src="/static/imgs/fenlei.png" mode="widthFix" @click="() => show = true" />
				<view class="book flex-box" v-if="isTop == 1">{{ user.username }}</view>
				<view class="dis-flex flex-y-center">
					<!-- <u-upload :fileList="fileList" name="files" v-if="isTop == 0" @afterRead="afterRead"> -->
						<view class="upload" @tap="backShow=true">上传背景</view>
					<!-- </u-upload> -->
					<image class="imgicon2" src="/static/imgs/sz.png" mode="widthFix"
						@click="toJump('/pages/my/setup')" />
				</view>
			</view>

			<view class="dis-flex flex-y-center boxWrap">
				<image v-if="user.avatar" class="avatar" :src="IMG_URL + user.avatar" style="border-radius:50% ;" />
				<image v-else class="avatar" src="/static/imgs/myavatar.png" />
				<view class="nameWrap flex-box">
					<view class="name">{{ user.username }}</view>
					<view class="ids">ID：{{ user.I_D || '' }}</view>
					<view class="bz dis-flex flex-y-center">
						<view class="gxz" v-if="user.is_love == 1">官宣中</view>
						<view class="gxz" v-else>未官宣</view>
						<view class="gxz yrz" v-if="user.name">已认证</view>
						<view class="gxz yrz" v-else>未认证</view>
					</view>
				</view>
			</view>
			<view class="infomation"><text>{{ user.gender == 0 ? '女' : '男' || '' }}</text> <text>{{ user.age ? '/' +
			user.age +
			'岁' : '' }}</text> <text>{{ user.constellation ? '/' + user.constellation : ''
					}}</text><text>{{ user.location ? '/' + user.location : '' }}</text> </view>
			<view class="desc" v-if="logon !== 0">{{ user.introduction ? user.introduction : '个人简介说明......' }}</view>
			<view class="love dis-flex flex-y-center">
				<view class="loves  dis-flex flex-y-center flex-x-center" @click="toJump('/pages/love/history?type=1')">
					<image class="avatar" src="/static/imgs/l_icon1.png" mode="widthFix" />恋爱史
				</view>
				<view class="loves  dis-flex flex-y-center flex-x-center" @click="toJump('/pages/love/history?type=2')">
					<image class="avatar" src="/static/imgs/l_icon2.png" mode="widthFix" />闺蜜史
				</view>
			</view>
			<view class="flex-all summary">
				<view @click="toJump('/pages/my/fans?type=1')">
					<view>{{ formatNumber(user.follow) || 0 }}</view>
					<view>关注</view>
				</view>
				<view class="line">|</view>
				<view @click="toJump('/pages/my/fans?type=2')">
					<view>{{ formatNumber(user.fons) || 0 }}</view>
					<view>粉丝</view>
				</view>
				<view class="line">|</view>
				<view @click="toJump('/pages/im/getLikes')">
					<view>{{ formatNumber(user.like_count) || 0 }}</view>
					<view>获赞</view>
				</view>
			</view>
		</view>


		<view class="notice_box" :class="{ notice_boxFix: isTop == 1 }">
			<view class="register_txt tac">
				<u-tabs :list="tabs" lineColor="#252525" :activeStyle="activeStyle" :current="current"
					@click="tabClick">

				</u-tabs>
			</view>
			<view class="second dis-flex flex-x-start flex-y-center" v-if="current == 0">
				<view v-for="(item, index) in secondMenus" :key="index" class="secondItem tac"
					:class="{ cur: index == actives }" @click="secondBtn(index)">{{ item.name }}</view>
			</view>
			<view class="second dis-flex flex-x-start flex-y-center litwo-box" v-if="current == 2">
				<view class="liTwo">
					<span>今天</span>
					<span @click="guanshow = true">管理</span>
				</view>
			</view>

			<view class="u-content" :class="{ content_top: current == 0 }">
				<WaterFall  :type="type" v-if="showList" :postType="postType" :content_top="current" :longTap="langTap">
				</WaterFall>
				<VowList  v-if="vowShow" :content_top="currentVow" type="1">
				</VowList>
			</view>
		</view>


		<!-- 左侧弹窗 -->
		<u-popup :show="show" mode="left" @close="() => show = false" style="background-color: #fff;">
			<view class="menus">
				<view class="items" v-for="item in menus" @click="Anoath(item.id)" :key="item.id">{{ item.name }}</view>
			</view>
		</u-popup>
		<Publish v-if='isPublish' @changeClose="() => isPublish = false"></Publish>
		<!-- <view style="position: fixed; bottom: 0; left: 0; right: 0;"> -->
		<Tabbar path="/pages/my/index"></Tabbar>
		<!-- </view> -->
		<view class=" liTime-box" v-if="current == 2">
			<view class="liTime">
				{{timeDay()}}
			</view>
		</view>
		<u-action-sheet :closeOnClickOverlay="true" :actions="guanList" :show="guanshow" @select="selectClick"
			title="是否清空？" @close="guanClose()" style="background-color: #fff;"></u-action-sheet>
			<u-action-sheet :actions="backList" title="上传背景图" :show="backShow" :closeOnClickOverlay="true"
				@close="backShow=false" @select="backSelect"></u-action-sheet>
	</view>
</template>

<script>
	import {
		IMG_URL,
	} from "../../config/app.js";
	import env from '@/utlis/env.js';
	import {
		getinfos
	} from "../../api/login.js"
	import WaterFall from '@/components/waterfall/waterfall'
	import VowList from '@/components/waterfall/vowList'
	import Publish from '@/components/publish'
	import {
		uploadImage
	} from "../../api/common.js";
	import {
		delLookHistory
	} from "../../api/hall.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {
			WaterFall,
			Publish,
			VowList
		},
		data() {
			return {
				backShow: false,
				backList: [{
						name: '从相册中选择',
						fontSize: '20',
						value: 1
					},
					{
						name: '还原',
						fontSize: '20',
						value: 2
					},
				],
				IMG_URL: IMG_URL,
				user: {},
				fileList: [],
				show: false,
				current: 0,
				currentVow:0,
				isPublish: false,
				tabs: [{
					name: '帖子'
				}, {
					name: '收藏'
				}, {
					name: '历史'
				}, {
					name: '我喜欢'
				}],
				list: [],
				isTop: 0,
				myScroll: 0,
				secondMenus: [{
					name: '分享',
					id: 1
				}, {
					name: '永久',
					id: 2
				}, {
					name: '宣文',
					id: 2
				}, {
					name: '时间',
					id: 2,
					
				},{
					name: '誓言',
					id: 2
				}],
				actives: 0,
				menus: [{
					name: '绑定介绍',
					id: 1
				}, {
					name: '宣文介绍',
					id: 2
				}, {
					name: '分享版介绍',
					id: 3
				}, {
					name: '永久版介绍',
					id: 4
				}, {
					name: '誓言版介绍',
					id: 5
				}, {
					name: '时间锁介绍',
					id: 6
				}, {
					name: '关于我们',
					id: 7
				}, {
					name: '合作联系',
					id: 8
				}],
				activeStyle: {
					color: '#252525'
				},
				url: '',
				type: 6,
				showList: true,
				postType: 0,
				Background: '',
				logon: '',
				title: '是否清空',
				guanList: [
					{
						name: '清空',
						value: 0
					},

				],
				guanshow: false,
				vowShow:false,
				langTap:true,
			}
		},
		onShow() {
			uni.hideTabBar()
			// this.search = this.$store.state.searchData;
			// console.log(this.search,'加入搜索');
			this.showList = true
			
			this.getinfo()
			this.change()
			this.Background = uni.getStorageSync('backgroundImageUrl');
			console.log('获取背景图',this.Background);


		},
		onload() {
			uni.hideTabBar()
		},
		onHide() {
			this.showList = false
			this.isTop = 0
		},
		created() {


		},
		onPageScroll: function(e) {
			console.log('scroll', e)
			if (e.scrollTop > this.myScroll) {
				console.log('666')
				this.isTop = 1
			} else {
				this.isTop = 0
			}
		},
		mounted() {
			this.url = env.baseUrl
			console.log('mounted 组件挂载完毕状态===============》');
			const query = uni.createSelectorQuery().in(this);
			query.select('#scrollView').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);
				this.myScroll = data.top + 100
			}).exec();
		},
		computed: {
			...mapGetters({
				page_update_notice: "page_update_notice",
			}),
		},
		watch: {
			page_update_notice() {
				this.isPublish = true
			}
		},
		methods: {
			backSelect(e) {
				let that = this
				if (e.value == 1) {
					console.log('从相册中选择');
					uni.chooseImage({
						count: 1, // 最多可以选择的图片张数，默认9
						sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
						success: function(res) {
							let data = JSON.stringify(res.tempFilePaths)
							let dataArray = JSON.parse(data);
							that.afterRead(dataArray[0])
						}
					});
			
				} else if (e.value == 2) {
					console.log('还原');
					this.Background = ''
					uni.setStorageSync('backgroundImageUrl','')
				}
			},
			guanClose(){
				this.guanshow = false
			},
			async selectClick(index) {
				if(index.value == 0){
					//清空
					await delLookHistory().then(res=>{
						uni.showToast({
							'duration':1500,
							'icon':'none',
							'title':res.msg
						})
						this.showList = false
						setTimeout(function() {
						  this.showList = true
						  this.guanshow = false	
						}, 1000);
						
					})
				}
			},
			guanli() {
				this.guanshow = true
			},
			timeDay() {
				const currentDate = new Date();

				const year = currentDate.getFullYear(); // 获取当前年份
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 获取当前月份并补零
				const day = currentDate.getDate().toString().padStart(2, '0'); // 获取当前日期并补零

				const formattedDate = `${year}-${month}-${day}`;
				return `${year}-${month}-${day}`
			},
			Anoath(id) {
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=binding"
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=announcement"
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=share"
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=permanent"
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=oath"
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=time"
					})
				} else if (id == 7) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=my"
					})
				} else if (id == 8) {
					uni.navigateTo({
						url: "/pages/login/agreement?type=cooperation"
					})
				}
			},
			// 显示与隐藏
			change() {
				this.logon = uni.getStorageSync("num") == 1 ? 0 : 1
			},
			// 上传背景图
			async afterRead(e) {
				const res = await uploadImage(e)
				this.Background = res.data.url
				uni.setStorageSync('backgroundImageUrl', res.data.url);
			},
			toJump(url) {
				if (!url) return
				uni.navigateTo({
					url
				});
			},

			tabClick(e) {
				console.log('切换状态', e.index);
				this.current = e.index
				if (e.index == 0) {
					this.type = 6
					this.langTap = true
				}
				if (e.index == 1) {
					this.type = 7
					this.langTap = false
				}
				if (e.index == 2) {
					this.type = 8
					this.langTap = false
				}
				if (e.index == 3) {
					this.type = 9
					this.langTap = false
				}

			},
			secondBtn(index) {
				console.log('切换状态', index);
				this.actives = index
				this.postType = index
				this.vowShow = false
				this.showList = true
				if(index == 4){
					this.showList = false
					this.currentVow = 0
					this.vowShow = true
					
				}
			},
			formatNumber(num) {
				// 将数字转换为带有"万"单位的字符串
				if (num >= 10000) {
					return (num / 10000).toFixed(1) + "w";
				} else {
					return num?.toString();
				}
			},
			//获取个人信息
			async getinfo() {
				const res = await getinfos().then(res => {
					console.log(res, '获取个人信息');
					this.user = res.data
					console.log(this.user)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-tabbar{
		background-color: #FFFFFF;
	}
	.container {
		width: 100%;
		// background: #fff;
		background-color: #F6F6F6;
		.header {
			background: #F6F6F6;
			height: 730rpx;
			padding: 52rpx 30rpx 45rpx;
			padding-top: 88rpx;
			background-size: cover;

			.isFixed {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 10;
				width: 100%;
				padding: 50rpx 30rpx;
				padding-top: 99rpx;
				background: #f6f6f6;
				transition: all 1s ease;
			}

			.imgicon {
				width: 36rpx;
			}

			.book {
				font-weight: bold;
				font-size: 34rpx;
				color: $uni-text-color;
				text-align: center;
			}

			.upload {
				width: 138rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				border-radius: 21rpx;
				border: 1px solid $uni-border-color;
				font-size: 24rpx;
				color: $uni-text-color-placeholder;
				margin-right: 24rpx;
			}

			.imgicon2 {
				width: 42rpx;
			}

			.official {
				font-weight: bold;
				font-size: 34rpx;
				color: $uni-text-color;
				text-align: center;
				margin: 30rpx auto;
			}

			.officialTime {
				font-weight: bold;
				font-size: 60rpx;
				color: $uni-text-color;
				text-align: center;
				margin-bottom: 12rpx;
			}

			.boxWrap {
				margin: 24rpx 0 32rpx;

				.avatar {
					width: 200rpx;
					// flex-shrink: 0;
					height: 200rpx;
				}

				.nameWrap {
					margin-left: 30rpx;

					.name {
						font-weight: 800;
						font-size: 48rpx;
						line-height: 56rpx;
						color: $uni-text-color;
					}

					.ids {
						font-size: 24rpx;
						color: $uni-text-color;
						margin: 20rpx 0;
					}

					.bz {
						.gxz {
							width: 140rpx;
							height: 42rpx;
							line-height: 42rpx;
							text-align: center;
							background: #FE3849;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #fff;
							margin-right: 12rpx;
						}

						.yrz {
							background: #000;
						}
					}
				}
			}

			.infomation {
				font-size: 24rpx;
				color: $uni-text-color;
				line-height: 40rpx;
			}

			.desc {
				font-size: 24rpx;
				color: $uni-text-color;
				line-height: 40rpx;
				margin: 20rpx 0;
			}

			.love {
				.loves {
					width: 170rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					background: #fff;
					border-radius: 26rpx;
					border: 1px solid #DDDDDD;
					margin-right: 28rpx;
					font-size: 24rpx;
					color: $uni-text-color;

					.avatar {
						width: 36rpx;
						margin-right: 8rpx;
					}
				}
			}

			.summary {
				height: 114rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 1px solid rgba(0, 0, 0, 0.13);
				margin-top: 30rpx;
				justify-content: space-around;


				&>view {
					text-align: center;
					color: $uni-text-color;

					&.line {
						color: #ddd;
					}
				}
			}




		}

		.notice_box {
			width: 100%;
			// overflow: auto;
			// margin-top: 1000rpx;
			// min-height: 1000rpx;
			background: #FFFFFF;
			// box-shadow: 0px 0px 30rpx 0rpx rgba(202, 202, 202, 0.6);
			border-radius: 50rpx 50rpx 0 0;
			margin: 20rpx auto 0;
			padding: 40rpx 10rpx;
			// margin-top: 300rpx;


			.register_txt {
				/deep/.u-tabs__wrapper__nav__item {
					flex: 1;
				}
			}

			.second {
				padding: 24rpx 0 12rpx 10rpx;
				position: absolute;
				z-index: 2;

				.secondItem {
					// position: absolute;
					width: 110rpx;
					line-height: 52rpx;
					background: #fff;
					border-radius: 26rpx;
					border: 1px solid #DDDDDD;
					font-size: 26rpx;
					color: #888888;
					margin-left: 22rpx;

					&.cur {
						border: 1px solid #252525;
						color: #252525;
					}
				}
			}

			.manage {
				text-align: right;
				font-size: 26rpx;
				color: #252525;
				padding: 10rpx 30rpx;
			}
		}

		.menus {
			padding: 60rpx 100rpx 30rpx;

			.items {
				font-size: 30rpx;
				color: $uni-text-color;
				line-height: 90rpx;
			}
		}
	}

	.notice_boxFix {
		// position: fixed;/
		// top: 100rpx;
		height: 500rpx;
	}

	.content_top {
		// padding-top: 80rpx;
	}

	.litwo-box {
		display: flex;
		width: 100%;
		justify-content: center;
		height: 40rpx;
		background-color: #fff;
		padding: 24rpx 0 30rpx 10rpx !important;
	}

	.liTwo {
		width: 94%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #444;
		height: 100%;
		align-items: center;
	}

	.father {
		position: relative;
	}

	.liTime-box {
		// position: absolute;
		width: 100%;
		// flex: auto;
		position: fixed;
		/* 固定定位 */
		bottom: 80rpx;
		// bottom: 80rpx;
		// height: 40rpx;
		line-height: 40rpx;
		background-color: #fff;
		padding: 12rpx 0 30rpx 10rpx !important;
		color: #444;
	}
	/deep/ .u-popup{
		background-color: #FFF;
	}
</style>